<template>
 <div class="box">
    <div style="width:95%;height:100%;margin:0 auto;" class="box-content">
      <!-- 头部 -->
    <div class="box-top" style="display:flex">
      <div  style="width:40%" class='box-top-left'>
        <div class="daohang">
      <i style="font-size:20px;color:#999;line-height:60px;float: left;"  class="el-icon-s-home"></i>  
      <el-breadcrumb separator="/">
      <el-breadcrumb-item style="font-size:15px;color:#999; line-height:60px; margin-left:8px;display:block;float: left;" >首页 </el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px;margin-left:-3px;float: left" class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">会员管理</el-breadcrumb-item>
    </el-breadcrumb>
      </div>
    </div>
  </div>
  <!-- 内容 -->
  <div class="content">
   <div>
   <span style="font-size:13px;  font-weight:700;">会员名称</span>
   <input placeholder="请输入用户名称" v-model="value" style="width:180px;height:23px;margin-left:5px" type="text" />
   <button @click="search()" style="width:70px;    border-radius: 5px ;height:28px;margin-left:15px;background:#198FFC;border:none;color:white"><i class="el-icon-search"></i>查询</button>
  </div>
<button @click="add()" style="width:100px;height:25px;margin-left:35px;margin-top:50px;background:white;border:1px solid #BBBBBB ">添加会员等级</button>


<el-table v-if="ist"
  :data="gradeList"
  border
  style="width: 65%;margin-left:5%;margin-top:3%;">
  <el-table-column
        prop="id"
        label="等级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="等级名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="discount"
        label="折扣">
      </el-table-column>
      <el-table-column
        prop="condition"
        label="升级条件">
      </el-table-column>
      <el-table-column
      prop="state"
        label="状态">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot="row">
        <span @click="del(row)" style="display:block;text-align:center">查看详情修改</span>
        </template>
      </el-table-column>
  </el-table>

  <el-table v-if="isFalse"
  :data="searchList"
  border
  style="width: 65%;margin-left:5%;margin-top:3%;">
  <el-table-column
        prop="id"
        label="等级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="等级名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="discount"
        label="折扣">
      </el-table-column>
      <el-table-column
        prop="condition"
        label="升级条件">
      </el-table-column>
      <el-table-column
      prop="state"
        label="状态">
      </el-table-column>
      <el-table-column
        label="操作">
        <span @click="del()">查看详情修改</span>

      </el-table-column>
  </el-table>

  </div>
    </div>
 </div> 
</template>

<script>
import {getgrade} from '../../api/index'
export default{
  data(){
    return{
      gradeList:[],
      searchList:[],
      value:'',
      isFalse:false,
      ist:true
    }
  },
  methods:{
    getList(){
      getgrade().then(res=>{
          this.gradeList=res.data
      })
    },
    search(){
      console.log(this.value)
      this.gradeList.forEach(item=>{
        if(this.value==item.id){
           this.searchList.push(item)
           this.isFalse=true
           this.ist=false
           if(this.searchList.length>1){
            this.searchList.shift()
           }
           console.log(this.searchList)
        }
      })
    },
    add(){
      this.$router.push('/vipGrade/addGrade')
    },
    del(row){
      console.log(row.row)
      let data=row.row.id
    this.$router.push({path:'/vipGrade/Gradedil/'+data})

    },
    
    // '/vipGrade/Gradedil'
  },
  created(){
    this.getList()
  },
  watch:{
        // 被侦听的变量count
        value(){
            if(this.value==''){
          this.isFalse=false
          this.ist=true
            }
        }
  },
}
</script>

<style lang="scss" scoped>
.box{
  width: 100%;
  height: 500px;
}
  .content{
    width: 100%;
    height: 500px;
  }
</style>